<template>
  <div id="app">
    <el-container>
      <el-header>
        <div class="sister-nav">
          <SisterNav></SisterNav>
        </div>
      </el-header>
    </el-container>
    <el-main>
      <div class="sister-main">
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="grid-content bg-purple">
              <SisterBanner></SisterBanner>
            </div>
            <div>
              <el-container>
                <el-container>
                  <ul class="nav">
                    <li class="nav-item">
                      <router-link class="nav-link router-a" to="/sister">妹纸</router-link>
                    </li>
                    <li class="nav-item">
                      <router-link class="nav-link router-a" to="/recommend">推荐</router-link>
                    </li>
                    <li class="nav-item">
                      <router-link class="nav-link router-a" to="/Android">Android</router-link>
                    </li>
                    <li class="nav-item">
                      <router-link class="nav-link router-a" to="/flutter">Flutter</router-link>
                    </li>
                    <li class="nav-item">
                      <router-link class="nav-link router-a" to="/ios">iOS</router-link>
                    </li>
                  </ul>
                </el-container>
              </el-container>
              <div>
                <el-col :span="20">
                  <el-card class="box-card">
                    <router-view />
                  </el-card>
                </el-col>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <RandomSister></RandomSister>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
import SisterNav from "./components/SisterNav/SisterNav";
import SisterBanner from "./components/SisterBanner/SisterBanner";
import RandomSister from "./components/RandomSister/RandomSister";
export default {
  data() {
    return {
    }
  },
  methods: {
  },
  components: {
    SisterNav,
    SisterBanner,
    RandomSister
  },
}
</script>

<style scoped lang="less">
@import "~normalize.css";

.el-header {
  background-color: #1D1F20;
  text-align: center;
  min-height: 123px;
  .sister-nav {
    max-width: 1140px;
    height: 123px;
    margin: 0 auto;
  }
}
.el-main {
  background-color: #151617;
  text-align: center;
  .sister-main {
    max-width: 1140px;
    margin: 0 auto;
  }
  .router-a {
    font-size: .75rem;
    color: #FFFFFF;
  }
}
</style>
